<template>
  <div :class="needUser ? 'article' : 'article-large'">
    <van-row type="flex" align="bottom" @click="goArticle(article.id)">
      <van-col span="3">
        <van-tag :color="tagSelect[article.category]">{{
          article.category
        }}</van-tag>
      </van-col>
      <van-col class="van-ellipsis title" span="21">
        {{ article.title }}
      </van-col>
    </van-row>
    <van-row
      type="flex"
      justify="space-between"
      style="margin: 10px 0"
      @click="goArticle(article.id)"
      v-if="needUser"
    >
      <van-col style="display: flex; align-items: center">
        <van-image
          width="40"
          height="40"
          :src="article.author.decorate_avatar"
          fit="cover"
          round
          lazy-load
        />
        <div style="padding-left: 10px">
          <h5 class="author">
            {{ article.author.username }}
          </h5>
          <h6 class="little">{{ article.create_time | dateFormat }}</h6>
        </div>
      </van-col>
      <van-col style="text-align: right">
        <div class="see">
          <van-icon name="eye-o" style="font-size: 14px" />
          <h5 class="big">{{ article.clicks }}</h5>
        </div>
        <div class="comment">
          <van-icon name="comment-o" style="font-size: 14px" />
          <h5 class="big">{{ article.comment_count }}</h5>
        </div>
        <!-- <h6 class="little">{{ article.update_time | dateFormat }}</h6> -->
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { updateArticleAPI } from "@/api/articleApi";
export default {
  props: {
    article: {},
    needUser: {
      default: true,
    },
  },
  data() {
    return {
      tagSelect: {
        问答: "#3498DB",
        分享: "#1ABC9C",
        闲聊: "#E74C3C",
      },
    };
  },
  methods: {
    goAuther(id) {
      this.$router.push(`/users/${id}`);
    },
    async goArticle(id) {
      const temp = {
        clicks: this.article.clicks + 1,
      };
      const { data: res } = await updateArticleAPI(temp, id);
      this.$router.push(`/community/${id}`);
    },
  },
};
</script>

<style lang="less">
.title {
  font-size: 18px;
  font-weight: bold;
}
.article {
  padding: 10px;
  padding-bottom: 0px;
}
.article-large {
  padding: 10px;
}
.article h5,
h6 {
  margin: 0;
  padding: 0;
}

.article .article-info {
  margin: 10px 0;
}

.article .big {
  font-size: 14px;
  font-weight: normal;
  padding-left: 5px;
}
.article .author {
  font-size: 14px;
  font-weight: normal;
}
.article .little {
  font-size: 12px;
  font-weight: normal;
}

.article .see {
  display: flex;
  align-items: center;
}

.article .comment {
  display: flex;
  align-items: center;
}
</style>
